import React, { useContext, useState } from 'react'
import { Button, Input, Form } from 'antd'

import { tips } from '@/utils/message'

import '@/assets/less/product/productSpecForm.less'

/**
 * 商品添加 sku 动态表单
 * @param {*} param0
 * @returns
 */
export default function ProductSpecForm({ specs, setSpecs, updateSpecList }) {
  // 动态表单每行最后添加的input的value
  const [specValue, setSpecValue] = useState([])
  // 是否显示增加新规格
  const [showNewly, setShowNewly] = useState(false)
  // 这块使用了手动管理input中的输入值
  // 规格名字
  const [specName, setSpecName] = useState('')
  // 规格属性
  const [specAttr, setSpecAttr] = useState('')

  /**
   * 添加新规格 在当前规格下新增一个规格属性
   * @returns
   */
  const addSpecs = () => {
    // 必填确认
    if (!specName || !specAttr) {
      return tips.warn('请完整输入规格和规格值')
    }
    // 规格是否重复的确认
    if (specs.some(item => item.value === specName)) {
      return tips.warn('规格已存在，请检查后重新输入')
    }
    // 将新规格添加到规格列表 (注意，这个方法是父组件传下来的)
    setSpecs([...specs, { value: specName, detail: [specAttr] }])
    // 隐藏添加规格，显示确认
    setShowNewly(false)
  }

  /**
   * 为规格添加新属性
   */
  const addSpecAttr = i => {
    const newSpecList = [...specs]
    if (newSpecList[i].detail.includes(specValue[i])) {
      return tips.warn('属性已存在，请检查后重新输入')
    }
    newSpecList[i].detail.push(specValue[i])
    // 将新属性添加到规格列表 (注意，这个方法是父组件传下来的)
    setSpecs(newSpecList)
    const newValues = [...specValue]
    // 添加完成后清空input中的内容
    newValues[i] = ''
    setSpecValue(newValues)
  }

  return (
    <>
      <div className="add-product-spec-form">
        {specs.map(({ value, detail }, index) => (
          <div className="form-item" key={`item_${index}`}>
            <div className="value">{value}</div>
            <div className="attr">
              {detail.map((item, i) => (
                <span className="attr-item" key={`${value}_attr_${i}`}>
                  {item}
                </span>
              ))}
              <div className="add-attr">
                <Input
                  addonAfter={
                    <Button type="primary" onClick={() => addSpecAttr(index)}>
                      添加
                    </Button>
                  }
                  value={specValue[index]}
                  onChange={e => {
                    const newSpecs = [...specValue]
                    newSpecs[index] = e.target.value
                    setSpecValue(newSpecs)
                  }}
                />
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* 这里判断是显示新增规格还是显示生成规格列表的按钮 */}
      {showNewly ? (
        // 这里没有自己的name,但是有自己的按钮,所以它脱离了表单域的控制
        <Form.Item className="newly-spec" label="规格">
          <Input
            value={specName}
            onChange={e => setSpecName(e.target.value)}
            placeholder="请输入规格"
          />
          <label>规格值：</label>
          <Input
            value={specAttr}
            onChange={e => setSpecAttr(e.target.value)}
            placeholder="请输入规格值"
          />
          {/* 点击后切换显示内容 */}
          <Button type="primary" onClick={addSpecs}>
            确认
          </Button>
          <Button>取消</Button>
        </Form.Item>
      ) : (
        <div className="add-product-spec-btn-wrap">
          {/* 点击后切换显示内容 */}
          <Button type="primary" onClick={() => setShowNewly(true)}>
            添加新规格
          </Button>
          {/* 点击后生成规格列表 */}
          <Button type="primary" onClick={() => updateSpecList('init')}>
            立即生成
          </Button>
        </div>
      )}
    </>
  )
}
